<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- bootstrap样式文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
    <!-- bootstrap-table样式文件 -->
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css" />
    <!-- bootstrap-validator样式文件 -->
    <link rel="stylesheet" href="../bootstrap-validator/css/bootstrapValidator.css" />
    <!-- jquery -->
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
    <!-- bootstrap的js文件 -->
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <!-- bootstrap-table的js文件 -->
    <script type="text/javascript" src="../bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- bootstrap-validator的js文件 -->
    <script type="text/javascript" src="../bootstrap-validator/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="../bootstrap-validator/js/language/zh_CN.js"></script>

    <script type="text/javascript" src="../js/common.js"></script>
    <style type="text/css">
        .modal-dialog {
            width: 350px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            initTable();
            initValidator();
        });
        function initTable(){
            //初始化表格
            $("#tab").bootstrapTable({
                //表格高度
                height: 480,
                //表格数据为null值时显示的文本
                undefinedText: "-",
                //显示所有列的控制按钮，通过此按钮用户可隐藏部分列
                showColumns: true,
                //显示刷新按钮
                showRefresh:true,
                //全屏显示按钮
                showFullscreen: true,
                //点击行选中复选框
                clickToSelect: true,
                //表格数据的单选
                singleSelect: false,
                //表格的工具栏
                toolbar: "#toolbar",
                //访问远程数据
                url: "../findUsers",
                method: "get",
                //发送远程请求时提交数据
                queryParams: function(param){
                    var obj = $("#toolbar").serializeObject();
                    obj["page"]=param.offset / param.limit + 1;
                    obj["pageSize"]=param.limit;
                    return obj;
                },
                //开启分页
                pagination: true,
                //设置客户端分页或服务端分页
                sidePagination: "server",
                //默认每页条数
                pageSize: 5,
                //设置默认条数选项
                pageList: [5,10,15,20],
                //更改分页按钮文本
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //列的描述,每一列的描述都是一个json对象
                columns: [
                    {
                        checkbox: true
                    },{
                        field : "id",
                        visible: false
                    },{
                        field : "username",
                        title: "用户名",
                        halign: "center"
                    },{
                        field : "password",
                        title: "密码",
                        halign: "center"
                    },{
                        field : "realname",
                        title: "真实姓名",
                        halign: "center"
                    }
                ]
            });
        }
        function initValidator(){
            $("#in_form").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                live: "enabled",
                fields: {
                    username: {
                        validators: {
                            notEmpty: {},
                            stringLength: {
                                min: 2,
                                max: 10,
                                message: "用户名长度必须为2到8位之间"
                            },
                            regexp: {
                                regexp: /^[0-9a-zA-Z_]+$/,
                                message: "用户名只能包含大小写字母、数字和下划线"
                            },
                            different: {
                                field: "password",
                                message: "用户名与密码不能相同"
                            },
                            remote: {
                                url: "../usernameIsExist",
                                type: "post",
                                message: "用户名已存在",
                                delay: 2000
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {},
                            different: {
                                field: "username",
                                message: "密码与用户名不能相同"
                            }
                        }
                    },
                    realname: {
                        validators: {
                            notEmpty: {},
                            stringLength: {
                                min: 2,
                                max: 6,
                                message: "真实姓名长度必须为2到6位之间"
                            }
                        }
                    }
                }
            });
            $("#up_form").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                live: "enabled",
                fields: {
                    password: {
                        validators: {
                            notEmpty: {}
                        }
                    },
                    realname: {
                        validators: {
                            notEmpty: {},
                            stringLength: {
                                min: 2,
                                max: 6,
                                message: "真实姓名长度必须为2到6位之间"
                            }
                        }
                    }
                }
            });
        }

        /**
         * 扩展jquery中对象的函数
         */
        $.fn.myFun = function () {
            return "测试扩展jquery中的方法";
        }
        /**
         * 扩展jquery中的自带函数
         */
        $.myFun2 = function () {
            alert("自带函数");
        }
        
        function doSearch(){
            $("#tab").bootstrapTable("refresh");
        }

        function clearSearch() {
            $("#toolbar")[0].reset();
            $("#tab").bootstrapTable("refresh");
        }
        function doInsert() {
            $.ajax({
                url : "../insertUsers",
                type : "post",
                data : $("#in_form").serializeObject(),
                beforeSend : function(){
                    var validator = $("#in_form").data("bootstrapValidator");
                    validator.validate();
                    return validator.isValid();
                },
                success : function (data) {
                    if(data.status==200){
                        //提示用户
                        alert("新增成功");
                        //关闭模态窗
                        $("#in_win").modal("hide");
                        //刷新表格
                        $("#tab").bootstrapTable("refresh");
                    }
                }
            })
        }
        function preUpdate() {
            //获取用户选中的数据
            var rows = $("#tab").bootstrapTable("getSelections");
            if(rows.length==0){
                alert("请选择一条要修改的数据");
            }else if(rows.length>1){
                alert("只能修改一条数据");
            }else{
                //将数据回填入表单中
                $.ajax({
                    url : "../findUsersById?id=" + rows[0].id,
                    type : "post",
                    success : function (result) {
                        if(result.status==200){
                            $("#up_id").val(result.data.id);
                            $("#up_username").val(result.data.username);
                            $("#up_password").val(result.data.password);
                            $("#up_realname").val(result.data.realname);

                            $("#up_win").modal("show");
                        }
                    }
                });
            }
        }
        function doUpdate() {
            $.ajax({
                url : "../updateUsers",
                type : "post",
                data : $("#up_form").serializeObject(),
                beforeSend : function(){
                    var validator = $("#up_form").data("bootstrapValidator");
                    validator.validate();
                    return validator.isValid();
                },
                success : function (data) {
                    if(data.status==200){
                        //提示用户
                        alert("修改成功");
                        //关闭模态窗
                        $("#up_win").modal("hide");
                        //刷新表格
                        $("#tab").bootstrapTable("refresh");
                    }
                }
            })
        }
        function doDelete() {
            //获取用户选中的数据
            var rows = $("#tab").bootstrapTable("getSelections");
            if(rows.length==0){
                alert("请选择要删除的数据");
            }else{
                //获取用户所选数据的id值
                var ids = [];
                $.each(rows, function () {
                    ids.push(this.id);
                });
                $.ajax({
                    url : "../deleteUsers",
                    type : "post",
                    data : {
                        ids : ids
                    },
                    beforeSend : function(){
                        return confirm("确定要删除吗?");
                    },
                    success : function (result) {
                        if(result.status==200){
                            //提示用户
                            alert("删除成功");
                            //刷新表格
                            $("#tab").bootstrapTable("refresh");
                        }
                    }
                });
            }
        }
    </script>
</head>
<body>
    <ol class="breadcrumb">
        <li>主页</li>
        <li>系统管理</li>
        <li class="active">用户列表</li>
    </ol>
    <div class="panel-body">
        <form id="toolbar" class="form-inline">
            <div class="btn-group">
                <button id="insertBtn" type="button" class="btn btn-success" data-toggle="modal" data-target="#in_win">
                    <span class="glyphicon glyphicon-plus"></span>添加
                </button>
                <button id="updateBtn" type="button" class="btn btn-warning" onclick="preUpdate()">
                    <span class="glyphicon glyphicon-edit"></span>修改
                </button>
                <button id="delBtn" type="button" class="btn btn-danger" onclick="doDelete()">
                    <span class="glyphicon glyphicon-trash"></span>删除
                </button>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="username" placeholder="用户名">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" name="realname" placeholder="真实姓名">
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" onclick="doSearch()">
                    <span class="glyphicon glyphicon-search"></span>搜索
                </button>
                <button type="button" class="btn btn-default" onclick="clearSearch()">
                    <span class="glyphicon glyphicon-ban-circle"></span>清空
                </button>
            </div>
        </form>
        <table id="tab" class="table table-bordered table-hover table-striped"></table>
    </div>
    <div class="modal fade" id="in_win">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>
                    <h2 class="modal-title">用户新增</h2>
                </div>
                <div class="modal-body">
                    <form id="in_form">
                        <div id="in_username_msg"></div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">用户名&emsp;</span>
                                <input type="text" name="username" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">密码&emsp;&emsp;</span>
                                <input type="text" name="password" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">真实姓名</span>
                                <input type="text" name="realname" class="form-control"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span>取消
                    </button>
                    <button type="button" class="btn btn-primary" onclick="doInsert()">
                        <span class="glyphicon glyphicon-ok"></span>确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="up_win">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>
                    <h2 class="modal-title">用户修改</h2>
                </div>
                <div class="modal-body">
                    <form id="up_form">
                        <input type="hidden" id="up_id" name="id"/>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">用户名&emsp;</span>
                                <input type="text" id="up_username" name="username" class="form-control" readonly/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">密码&emsp;&emsp;</span>
                                <input type="text" id="up_password" name="password" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">真实姓名</span>
                                <input type="text" id="up_realname" name="realname" class="form-control"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span>取消
                    </button>
                    <button type="button" class="btn btn-primary" onclick="doUpdate()">
                        <span class="glyphicon glyphicon-ok"></span>确定
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>